<template>
  <div class="release-com">
    <!-- 头部 -->
    <van-form @submit="onSubmit">
      <div class="submit-top">
        <van-button native-type="button" @click="onClickLeft">返回</van-button>
        <van-button native-type="submit" class="add-release">发布</van-button>
      </div>
      <!-- 中心区域 -->
      <div class="box">
        <van-notice-bar text="请先选择合适的专题，然后填写标题，内容，选择想要上传的文件，最后点击右上角的发送" left-icon="volume-o" />
        <!-- 专题列表 -->
        <div class="add-class">
          <ul>
            <li
              v-for="(item,index) in subjectlist"
              :key="index"
              class="class-label"
              :class="{active:index==isShow}"
              @click="clickLabel(index)"
            >{{item.name}}</li>
          </ul>
        </div>
        <div class="inner">
          <div class="title-box">
            <label for="title">标题</label>
            <input type="text" name id="title" v-model="title" required />
            <!-- <van-field
              v-model="title"
              name="标题"
              label="标题"
              :rules="[{ required: true, message: '请填写标题' }]"
            />-->
          </div>
          <p class="text-p">正文：</p>
          <textarea
            name="内容"
            class="text-content"
            placeholder="请畅所欲言吧~"
            cols="36"
            rows="10"
            v-model="intro"
            required
          ></textarea>
        </div>
      </div>
      <!-- 上传图片 -->
      <van-uploader v-model="filelist" :after-read="afterRead" multiple :max-count="1" />
    </van-form>
  </div>
</template>
<script>
import { uploadAvatar } from "../../api/forum-api";
import { addList } from "../../api/forum-api";
import { getSubject } from "../../api/forum-api";
export default {
  data() {
    return {
      title: "",
      intro: "",
      filelist: [],
      url: "",
      //专题列表
      subjectlist: [],
      categoryId: "",
      id: "",
      isShow: -1
    };
  },
  created() {
    getSubject()
      .then(res => {
        console.log(res.rows);
        this.subjectlist = res.rows;
      })
      .catch();
  },
  methods: {
    onClickLeft() {
      this.$toast("返回");
      this.$router.back();
    },
    //单击专题
    clickLabel(index) {
      this.id = index + 1;
      this.isShow = index;
      // console.log(index + 1);
    },
    changeValue(index) {
      this.isActive = index;
    },
    afterRead(file) {
      // 上传图片
      uploadAvatar(file.file).then(res => {
        this.url = res.url;
        // if(this.url = ''){
        //   alert("图片")
        // }
        console.log(this.url);
      });
      //   console.log(file);
    },
    onSubmit() {
      console.log(this.filelist.length);
      if (this.filelist.length == 0) {
        return this.$toast("请先上传一张美丽的图片呦~~");
      } else {
        this.$toast("发布成功");
        //发布
        addList(this.id, this.title, this.intro, this.url).then(res => {
          console.log(res);
        });
        this.$router.push('/home')
      }
    }
  }
};
</script>
<style lang="less" scoped>
.release-com {
  margin-bottom: 50px;

  .submit-top {
    height: 44px;
    display: flex;
    justify-content: space-between;
    button {
      border: none;
      color: #1989fa;
    }
  }
  .add-class {
    // height: 100px;
    // border: 1px solid #000;
    ul {
      display: flex;
      flex-wrap: wrap;
      .class-label {
        border: 1px solid #4169e1;
        // background: #6495ED;
        padding: 4px;
        margin: 4px;
        border-radius: 5px;
        font-size: 12px;
      }
      .active {
        background-color: #add8e6;
        color: #fff;
      }
    }
  }
  .inner {
    width: 95%;
    padding: 4px;
    margin: auto;
    .title-box {
      margin-top: 20px;
      #title {
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 10px;
        margin-left: 10px;
      }
    }
    .text-p {
      margin-bottom: 0;
    }
    .text-content {
      margin-top: 10px;
      border: none;
      border: 1px solid #ccc;
      border-radius: 10px;
      padding: 4px;
    }
  }
}
</style>